<template>
  <div class="dianzan-box">
    <div>
      <van-icon name="like" @click="changeDianZan" :class="{isdianzan:isDianZan}" />
      <span>赞</span>
    </div>
    <div>
      <van-icon name="comment-o" />
      <span>评论</span>
    </div>
  </div>
</template>

<script>
import {
  isDianZan,
  dianZanDynamic,
  cancleDianZanDynamic,
} from "network/dynamic";

import { mapState } from "vuex";

export default {
  name: "dianzan",
  props: {
    dynaId: {
      type: String,
      default: () => "",
    },
    dynaUserId: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      isDianZan: false,
    };
  },
  methods: {
    changeDianZan() {
      let lovedUserId = this.userId;
      let dynaId = this.dynaId;
      let dynaUserId = this.dynaUserId;
      console.log(dynaUserId);
      if (this.userId == null) {
        this.$toast({
          message: "请登录后点赞",
          position: "bottom",
        });
        this.$router.push("/login");
        return;
      }
      if (this.isDianZan) {
        cancleDianZanDynamic({ lovedUserId, dynaId, dynaUserId }).then(
          (res) => {
            console.log(res);
            this.isDianZan = !this.isDianZan;
          }
        );
      } else {
        dianZanDynamic({ lovedUserId, dynaId, dynaUserId }).then((res) => {
          console.log(res);
          this.isDianZan = !this.isDianZan;
        });
      }
      this.$emit("changeDianZan");
    },
  },
  created() {
    let lovedUserId = this.userId;
    let dynaId = this.dynaId;
    // console.log(123);
    isDianZan({ lovedUserId, dynaId }).then((res) => {
      // console.log(res.data);
      this.isDianZan = res.data;
    });
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.dianzan-box {
  display: flex;
  align-items: center;
  padding: 0 70px 10px;
  height: 30px;
  line-height: 30px;
}
.dianzan-box span {
  font-size: 12px;
}
.dianzan-box > div {
  margin-right: 20px;
}
.van-icon {
  margin-right: 7px;
}
.circle-box {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.dianzan-box > div {
  display: flex;
  align-items: center;
}
.isdianzan {
  color: #ff5654;
}
</style>